<ng-container *ngIf="data.skills.normal.name">
  <mat-card class="card" [style.width.px]="cardWidth">
    <mat-card-header>
      <mat-card-title [innerText]="'DPS.NAME' | translate"></mat-card-title>
    </mat-card-header>
    <mat-card-content class="content">
      <mat-divider></mat-divider>
      <mat-tab-group
        [(selectedIndex)]="selectedIndex"
        animationDuration="0"
        (selectedIndexChange)="onTabChanged()"
      >
        <mat-tab *ngFor="let tab of tabs; let index = index" [label]="'[  ' + (index + 1) + '  ]'">
          <div class="tab">
            <div class="menu-div">
              <button mat-icon-button [matMenuTriggerFor]="menu">
                <mat-icon>more_vert</mat-icon>
              </button>
              <mat-menu #menu="matMenu">
                <button mat-menu-item (click)="removeTab(index)" [disabled]="tabs.length < 2">
                  <mat-icon>delete</mat-icon>
                  <span [innerText]="'SYS.DELETE' | translate"></span>
                </button>
              </mat-menu>
            </div>
            <!-- 値 -->
            <br />
            <mat-form-field appearance="legacy" floatLabel="always" class="long-field">
              <mat-label [innerText]="'DPS.OUTLINE' | translate"></mat-label>
              <input
                matInput
                maxlength="40"
                [(ngModel)]="showOutlineValue"
                (keyup)="onOutlineValueKeyup($event)"
              />
            </mat-form-field>
            <mat-form-field appearance="legacy" floatLabel="always" class="normal-field">
              <mat-label [innerText]="'DPS.DURATION' | translate"></mat-label>
              <input
                matInput
                type="number"
                step="0.01"
                [(ngModel)]="showDurationValue"
                (keyup)="onDurationValueKeyup($event)"
              />
              <span matSuffix
                ><span [innerText]="('DPS.SECONDS' | translate) + '&nbsp;'"></span
              ></span>
            </mat-form-field>
          </div>
        </mat-tab>
        <mat-tab disabled>
          <ng-template mat-tab-label>
            <button
              class="add-button"
              mat-icon-button
              (click)="copyTab()"
              matTooltip="Copy"
              matTooltipPosition="above"
            >
              <mat-icon>content_copy</mat-icon>
            </button>
            <button
              class="add-button"
              mat-icon-button
              (click)="addTab()"
              matTooltip="Add"
              matTooltipPosition="above"
            >
              <mat-icon>add_circle</mat-icon>
            </button>
            <button
              class="add-button"
              mat-icon-button
              (click)="addCodeTab()"
              matTooltip="Import"
              matTooltipPosition="above"
            >
              <mat-icon>arrow_circle_down</mat-icon>
            </button>
          </ng-template>
        </mat-tab>
      </mat-tab-group>
      <div class="list-container">
        <div class="dmg-list">
          <div *ngIf="damageInfos && damageInfos.length === 0" class="no-item-tip">
            <span [innerText]="'DPS.TIPS' | translate"></span>
          </div>
          <ng-container *ngFor="let dmg of damageInfos; index as i">
            <div class="dmg-item">
              <div class="one-line align-start">
                <img
                  class="skill-icon"
                  *ngIf="dmg.iconSrc"
                  [style.background-image]="dmg.iconBGColor"
                  [src]="dmg.iconSrc"
                  loading="lazy"
                  appImgErrorHandle
                />
                <div>
                  <div class="one-line">
                    <span
                      class="skill-prefix-name"
                      [innerText]="('TEAM.' + dmgFromName[dmg.name + (dmg.skillIndex ?? '')] | translate)"
                    ></span>
                    <span *ngIf="dmg.index" [innerText]="'DPS.DELIMITER' | translate"></span>
                    <span *ngIf="dmg.index"
                      >{{ dmg.index }}<span [innerText]="'DPS.HIT' | translate"></span
                    ></span>
                    <span [innerText]="'DPS.DELIMITER' | translate"></span>
                    <span>{{ dmg.rate }}</span>
                  </div>
                  <div>
                    <div class="one-line">
                      <span
                        class="skill-prefix-name"
                        [innerText]="'DPS.DMG_VAL_LABEL' | translate"
                      ></span>
                      <span [innerText]="'DPS.DELIMITER' | translate"></span>
                      <span>{{ $any(dmg.results[dmg.resultProp] ?? 0).toFixed(2) }}</span>
                    </div>
                  </div>
                </div>
                <div class="last-right">
                  <mat-icon class="close-icon" (click)="removeItem(i)">close</mat-icon>
                </div>
              </div>
              <mat-divider></mat-divider>
              <div
                class="dmg-info-detail"
                [style.background]="specialColorMap[dmg.resultProp] ?? elementColorMap[dmg.elementType]"
              >
                <mat-form-field
                  appearance="legacy"
                  floatLabel="always"
                  floatLabel="always"
                  class="diabled-black-color detail-field detail-field-left"
                >
                  <mat-label [innerText]="'DPS.ELEMENT_TYPE' | translate"></mat-label>
                  <select matNativeControl disabled>
                    <option
                      [innerText]="'COMMON.ELEMENT_TYPE.' + dmg.elementType | translate"
                    ></option>
                  </select>
                </mat-form-field>
                <mat-form-field
                  appearance="legacy"
                  floatLabel="always"
                  floatLabel="always"
                  class="diabled-black-color detail-field detail-field-right"
                >
                  <mat-label [innerText]="'DPS.ATTACK_TYPE' | translate"></mat-label>
                  <select matNativeControl disabled>
                    <option
                      [innerText]="'COMMON.ATTACK_TYPE.' + dmg.attackType | translate"
                    ></option>
                  </select>
                </mat-form-field>
                <mat-form-field
                  appearance="legacy"
                  floatLabel="always"
                  class="align-select-expand-icon detail-field detail-field-left"
                >
                  <mat-label [innerText]="'DPS.DMG_TYPE' | translate"></mat-label>
                  <mat-select
                    [value]="dmg.resultProp"
                    (selectionChange)="changeProp(i, $event.value)"
                  >
                    <ng-container
                      *ngFor="let dmgType of dmg.isAbsoluteDmg?damageTypeAbsMap.get(dmg.elementType):damageTypeMap.get(dmg.elementType)"
                    >
                      <mat-option [value]="dmgType">
                        <span
                          [innerText]="'GENSHIN.DMG.' + damageTypeNameMap[dmgType].toUpperCase() | translate"
                        ></span>
                      </mat-option>
                    </ng-container>
                  </mat-select>
                </mat-form-field>
                <mat-form-field
                  appearance="legacy"
                  floatLabel="always"
                  class="align-select-expand-icon detail-field detail-field-right"
                >
                  <mat-label [innerText]="'DPS.TIMES' | translate"></mat-label>
                  <input
                    matInput
                    type="number"
                    step="0.01"
                    [(ngModel)]="dmg.times"
                    (keyup)="onTimesValueKeyup(i, $event)"
                  />
                </mat-form-field>
              </div>
            </div>
          </ng-container>
        </div>
      </div>
      <br />
      <div class="one-line">
        <div class="white"></div>
        <div class="dps-container">
          <div
            class="dps-label"
            [style.background]="dpsBGColor"
            [innerText]="'DPS.DPS_LABEL' | translate"
          >
            DPS
          </div>
          <div class="dps-val">{{ dps }}</div>
        </div>
      </div>
      <br />
      <mat-divider></mat-divider>
      <br />
      <mat-form-field appearance="outline" floatLabel="always" class="auto-field">
        <mat-label [innerText]="'DPS.CODE' | translate"></mat-label>
        <input matInput [ngModel]="showDPSCodeValue" readonly />
        <button mat-icon-button matSuffix (click)="copyCode()">
          <mat-icon class="material-icons-outlined">share</mat-icon>
        </button>
      </mat-form-field>
    </mat-card-content>
  </mat-card>
</ng-container>
